<template>
  <div class="txyt-main">
    <el-row :gutter="10">
    <el-col :xs="16" :sm="12" :md="8" :lg="6" :xl="2"><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="8" :sm="12" :md="16" :lg="18" :xl="22">
        <div class="grid-content bg-purple-light">
            <el-input type="textarea" :rows="25" readonly='readonly' v-model="textarea"></el-input>
        </div>
    </el-col> 
    </el-row>
    <br>
    <el-row>        
      <el-col :xs="8" :sm="12" :md="16" :lg="18" :xl="22">    
          <el-col  :span="22">
              <el-input type="text" :rows="3" placeholder="请输入内容" v-model="textareasend"></el-input>
          </el-col>
          <el-col  :span="1">
              <el-button type="primary" @click="send">发送消息</el-button>
          </el-col>
      </el-col> 
      <el-col :xs="16" :sm="12" :md="8" :lg="6" :xl="2">
      </el-col>

    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class Txyt extends Vue {
  private textarea: string = '';
  private textareasend: string = '';

  public getMessagea: any = (message: any) => {
    console.log("收到消息:"+message.payloadString);
    this.textarea = this.textarea + message.payloadString
  }

  constructor() {
    super();
    this.$store.dispatch('taskMqtt', this.getMessagea)
  }

  private send() {
    this.$store.dispatch('sendMessage', this.textareasend);
  }
}
</script>
